<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app"></div>
<script src="../js/vue.js"></script>
<script>

  //创建子组件
  const box = {
    // 子组件接收数组
    props: ['num1','num2','num3','num4'],
    template: `
      <div>数据1:{{num1}}</div>
      <div>数据2:{{num2}}</div>
      <div>数据3:{{num3}}</div>
      <div>数据4:{{num4}}</div>
      `
  }



  // 1.创建Vue的实例对象
  const app = Vue.createApp({
    data(){
      return {
        a: 100,
        b: 200,
        c: 300,
        d: 400,
        numObj: {
          num1: 100,
          num2: 200,
          num3: 300,
          num4: 400,
        }
      }
    },
    //挂载子组件
    components: {
      box,
    },
    template: `
        <!--常规父组件传给子组件的写法-->
        <box :num1="a" :num2="b" :num3="c" :num4="d"></box>
        <!-- 快捷写法我们可以这么写  -->
        <box v-bind="numObj"></box>
        <!-- 快捷写法也可以这么写  -->
        <box :num1="numObj.num1" :num2="numObj.num2" :num3="numObj.num3" :num4="numObj.num4"></box>


    `
  });

  app.mount('#app');
</script>
</body>
</html>